<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="6" :xs="24">
        <el-card class="box-card" >
          <div slot="header">待评价人员</div>
          <div class="head-container" style="margin-bottom: 15px;">
            <el-row>
              <el-col :span="20"><el-progress :text-inside="true" :stroke-width="24" :percentage="percent" status="success"></el-progress></el-col>
              <el-col :span="4" style="margin-top:5px"><span>{{evTotal}}/{{total}}</span></el-col>
            </el-row>
          </div>
          <!--单位数据-->
          <div class="head-container">
            <el-row class="seacher">
              <el-col :span="8">
                <el-select v-model="queryParams.status"
                           placeholder="请选择"
                           @change="handleQuery"
                           size="small">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="16">
                <el-input
                  v-model="queryParams.name"
                  placeholder="请输入待评价人员"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                  suffix-icon="el-icon-search"
                />
              </el-col>
            </el-row>
          </div>
          <div class="head-container box-body-left">
            <el-empty v-if="users === null || users.length == 0" description="您无需对任何人进行评价哦！"></el-empty>
            <el-card v-else shadow="hover"
                     body-style="padding: 10px 10px;"
                     style="margin-bottom: 5px"
                     :key="item.id"
                     :class="{selected:item.id === selectedItem.id}"
                     v-for="item in users">
              <div class="user-info" @click="handleClick(item)">
                <div v-if="item.status" class="user-item circle" title="已评价"></div>
                <div v-if="!item.status" class="user-item nocircle" title="未评价"></div>
                <div class="user-item">
                  <div class="user-item-username">{{item.name}}</div>
                  <div class="user-item-workplace">{{item.workplace}}</div>
                </div>
              </div>
            </el-card>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card class="box-card box-body-right">
          <div class="evluate-info">
            <div class="box-title">
              <span>新的社会阶层人士综合评价指标体系</span>
            </div>
            <div class="box-content">
              <div>尊敬的评价部门（单位）：</div>
              <div style="padding: 5px 15px">您好！感谢您在百忙之中参与评价，请根据评价对象的实际情况进行评测。</div>
            </div>
            <el-divider></el-divider>
            <el-empty v-if="!selectedItem.id" description="您暂时无需评价，如有疑问请联系管理员！"></el-empty>
            <div class="evluate-user" v-if="selectedItem.id">
              <el-descriptions title="被评价人员基本信息" :column="3">
                <el-descriptions-item label="姓名">{{selectedItem.name}}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ selectedItem.sex }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ selectedItem.phone }}</el-descriptions-item>
                <el-descriptions-item label="出生年月">{{ selectedItem.birthday }}</el-descriptions-item>
                <el-descriptions-item label="名族">{{selectedItem.ethnicity}}</el-descriptions-item>
                <el-descriptions-item label="政治面貌">{{ selectedItem.politics }}</el-descriptions-item>
                <el-descriptions-item label="学历">{{ selectedItem.degree }}</el-descriptions-item>
                <el-descriptions-item label="籍贯">{{ selectedItem.origin? selectedItem.origin : '无' }}</el-descriptions-item>
                <el-descriptions-item label="政治安排">{{ selectedItem.arrange? selectedItem.arrange : '无' }}</el-descriptions-item>
                <el-descriptions-item label="社会职务">{{ selectedItem.position? selectedItem.position : '无' }}</el-descriptions-item>
                <el-descriptions-item label="身份证号码">{{ selectedItem.idcard? selectedItem.idcard : '无' }}</el-descriptions-item>
                <el-descriptions-item label="身份类别">
                  <dict-tag
                    :options="dict.type.sys_eval_type"
                    :value="selectedItem.type"
                  />
                </el-descriptions-item>
                <el-descriptions-item label="工作单位及职务">{{ selectedItem.workplace }}</el-descriptions-item>
                <el-descriptions-item label="评价情况" label-class-name="customlabel" content-class-name="customlabel">完成{{currentFinish}}项，共{{currentTotal}}项</el-descriptions-item>
              </el-descriptions>
            </div>
            <el-divider></el-divider>
            <div class="evluate-item">
              <el-form ref="form" :model="form" label-position="top"  size="small">
                <div v-for="(item,index) in evaluateList">
                  <el-form-item :label="item.sn + '、' + item.name"
                                :rules="[{
                    required: true,
                    message: '请选择评价选项',
                    trigger: 'blur',
                  }]">
                    <el-radio-group v-model="item.evaluateItemId" @change="changeEvaluteStatus(item.id)">
                      <el-radio v-if="item.evaluateItems[0]" :label="item.evaluateItems[0].id">{{item.evaluateItems[0].content}}</el-radio>
                      <el-radio v-if="item.evaluateItems[1]"  :label="item.evaluateItems[1].id">{{item.evaluateItems[1].content}}</el-radio>
                      <el-radio v-if="item.evaluateItems[2]"  :label="item.evaluateItems[2].id">{{item.evaluateItems[2].content}}</el-radio>
                      <el-radio v-if="item.evaluateItems[3]"  :label="item.evaluateItems[3].id">{{item.evaluateItems[3].content}}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="如果评价C、D,请文字说明">
                    <el-input type="textarea" v-model="item.remark"></el-input>
                  </el-form-item>
                </div>
                <el-form-item style="text-align: center;" v-if="selectedItem.id">
                  <el-button type="primary" @click="onSubmit">保存评价</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import preventBack from 'vue-prevent-browser-back';//组件内单独引入
import {listEvaluationByMember, listAllByMemberId, evaluate} from "@/api/evaluation/memberEvaluation";

export default {
  name: "Evaluation",
  dicts: [
    "sys_eval_type",
  ],
  mixins: [preventBack],//注入  阻止返回上一页
  data() {
    return {
      //选中的用户
      selectedItem: {},
      //待评价人员总数
      total: 0,
      //已评价人数
      evTotal: 0,
      //评价进度
      percent: 0,
      //已完成评价
      currentFinish: 0,
      currentTotal: 0,
      queryParams: {
        status: '所有',
        name: '',
      },
      //评价项目
      evaluateList: [],
      //临时评价项目
      tmpEvaluateList: [],
      //临时已评价项目
      tmpEvList: [],
      options: [{
        label: '所有',
        value: '-1'
      },{
        label: '未评价',
        value: '0'
      },{
        label: '已评价',
        value: '1'
      }],
      users: [
      ],
      form:{

      }
    };
  },
  created() {
    this.getMemberList();
  },
  methods: {
    // 查询人员评价列表
    getMemberList(){
      listEvaluationByMember(this.queryParams).then((res) => {
        this.users = res.data;
        //计算评价进度
        this.total = this.users.length;
        this.evTotal = this.users.filter(item => item.status).length;
        let t = this.total > 0 ? this.total: 1;
        this.percent = Math.round(this.evTotal / t * 100);
        if(this.users.length > 0){
          this.selectedItem = this.users[0];
          this.getEvaluateList();
        }
      });
    },
    // 改变评价状态
    changeEvaluteStatus: function (id) {
      var tmpItem = this.tmpEvaluateList.filter(item => item.id == id);
      var item = this.tmpEvList.filter(item => item.id == id);
      //判断当前的项目是否已评价
      if (!tmpItem[0].evaluateItemId && item.length == 0) {
        this.currentFinish++;
        this.tmpEvList.push(tmpItem[0]);
      }
    },
    // 获取评价列表
    getEvaluateList: function () {
      this.tmpEvList = [];
      listAllByMemberId({memberId: this.selectedItem.id}).then((res) => {
        this.evaluateList = res.data;
        this.tmpEvaluateList = JSON.parse(JSON.stringify(this.evaluateList));
        //设置当前已完成的评价
        this.currentTotal = res.data.length;
        var evaluates = res.data;
        var finish = 0;
        for (var index in evaluates) {
          var evaluateItemId = evaluates[index].evaluateItemId;
          if(evaluateItemId != null){
            finish ++ ;
          }
        }
        this.currentFinish = finish;
      });
    },

    // 点击用户
    handleClick(item){
      this.selectedItem = item;
      // 获取评价列表
      this.getEvaluateList();
    },
    //查询人员
    handleQuery(){
      this.getMemberList();
    },
    // 保存评价
    onSubmit(){
      if(!this.selectedItem.id){
        this.$modal.msgWarning("请选择评价人员");
        return;
      }
      var memberId = this.selectedItem.id;
      //评价项目
      for(var index in this.evaluateList){
        var item = this.evaluateList[index];
        item.memberId = memberId;
        if(!item.evaluateItemId){
          this.$modal.msgWarning("请对"+ item.name + "进行评价");
          return;
        }
      }
      evaluate(this.evaluateList).then((res) => {
        this.$modal.msgSuccess("保存成功");
        this.getMemberList();
      });
    }
  }
};
</script>
<style lang="scss">
.el-radio__label{
  white-space: normal;  /* 换行 */
  line-height: 2;
}
.el-radio{
  display: block;
}
.customlabel{
  color: red;
}
</style>
<style lang="scss" scoped>
.box-body-left{
  height: calc(100vh - 255px);
  overflow: auto;
}
.box-body-right{
  height: calc(100vh - 90px);
  overflow: auto;
}
.seacher{
  margin-bottom: 15px;
}
.user-info {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
  .user-item {
    margin-left: 10px;
  }
  .circle {
    width: 20px;         /* 圆点的大小 */
    height: 20px;        /* 圆点的大小 */
    background-color: #11b95c; /* 圆点的颜色 */
    border-radius: 50%;  /* 使其成为圆形 */
    margin-left: 5px;
  }
  .nocircle{
    width: 20px;         /* 圆点的大小 */
    height: 20px;        /* 圆点的大小 */
    background-color: #899389; /* 圆点的颜色 */
    border-radius: 50%;  /* 使其成为圆形 */
    margin-left: 5px;
  }
  .user-item-username {
    font-size: 16px;
  }
  .user-item-workplace{
    margin-top: 5px;
    color: #99a9bf;
  }
}
.selected{
  background-color: #e8f4ff;
  border-left: 5px solid #057eee;
}

.evluate-info{
  .box-title{
    text-align: center;
    font-size: 20px;
    color: #035fb4;
    font-weight: bold;
  }
  .box-content{
    text-align: left;
    font-size: 14px;
    color: #767778;
    margin: 10px 5px;
  }
  .evluate-item{
    .evluate-item-detail h4{
      font-weight: bold;
    }
  }
}
</style>
